<template>
  <el-form ref="smsvcodeFormRef" :model="user" :rules="rules" status-icon>
    <el-form-item prop="mobileNumber" label="手机号">
      <el-input
        v-model="user.mobileNumber"
        autocomplete="off"
        type="text"
        placeholder="请输入手机号"
        @input="(value) => $emit('update:mobilenumber', value)"
      />
    </el-form-item>
    <el-form-item prop="smsvcode" label="短信验证码">
      <el-input
        v-model="user.smsvcode"
        autocomplete="off"
        placeholder="请输入验证码"
        @input="(value) => $emit('update:smsvcode', value)"
      >
        <template #append>
          <el-button
            @click="showSwipeVerifyDialog"
            :disabled="disabled"
            v-debounced
            >{{ btnText }}</el-button
          >
        </template>
      </el-input>
    </el-form-item>
  </el-form>
  <el-dialog
    v-model="swipeVerifyDialogVisible"
    title="请完成安全验证"
    width="355px"
  >
    <SwipeVerify
      ref="swipeVerifyInstance"
      :imgs="images"
      @success="onSwipVerifySuccess"
    ></SwipeVerify>
  </el-dialog>
</template>

<script lang="ts" setup>
import { checkMobileNumber } from '@/libs/CheckFields';
import { FormInstance } from 'element-plus';
import { ref } from 'vue';
import { SwipeVerify, SwipeVerifyInstance } from 'vue3-swipe-verify';
import 'vue3-swipe-verify/dist/style.css';
import imgUrl from '@/assets/varify.jpg';

const props = defineProps({
  mobilenumber: { type: String, required: true },
  smsvcode: { type: String, required: true },
});
const emit = defineEmits(['update:mobilenumber', 'update:smsvcode', 'send']);

const btnText = ref('获取验证码');
/**
 * 获取验证码按钮可用新状态
 */
const disabled = ref(false);
const user = ref({ mobileNumber: props.mobilenumber, smsvcode: '' });

const rules = {
  mobileNumber: [
    { required: true, message: '请输入手机号', trigger: 'blur' },

    {
      validator: checkMobileNumber,
      trigger: 'blur',
    },
  ],
  smsvcode: [
    { required: true, message: '请输入短信验证码', trigger: 'blur' },
    {
      max: 6,
      message: '长度错误',
      trigger: 'blur',
    },
  ],
};

const smsvcodeFormRef = ref<FormInstance>();
// 通过expose将表单实例暴露给父组件
defineExpose({
  smsvcodeFormRef: smsvcodeFormRef.value,
  validate: () => smsvcodeFormRef.value?.validate(),
  validateField: (value: string) => smsvcodeFormRef.value?.validateField(value),
});
const time = ref(60);
/**
 * 获取注册短信验证码
 */
async function SendSmsVcode() {
  emit('send');
  countdown();
}
/**
 * 验证码倒数计时
 */
function countdown() {
  // 1.时间开始倒数
  // 2.按钮进入禁用状态
  // 3.如果倒计时结束 按钮恢复可用状态 按钮文字变为重新发送, 时间重置
  // 4.倒计时的过程中 按钮文字为 多少s后重新发送
  let timer = setInterval(() => {
    time.value--;
    btnText.value = `${time.value}s 后重发`;
    disabled.value = true;
    if (time.value === 0) {
      disabled.value = false;
      btnText.value = '重新发送';
      time.value = 60;
      clearInterval(timer);
    }
  }, 1000);
}

function showSwipeVerifyDialog() {
  swipeVerifyDialogVisible.value = true;
}

const images = [imgUrl];
const swipeVerifyDialogVisible = ref(false);
const swipeVerifyInstance = ref<SwipeVerifyInstance>();
/**
 * 图形验证成功
 */
function onSwipVerifySuccess() {
  SendSmsVcode();
  swipeVerifyDialogVisible.value = false;
  swipeVerifyInstance.value?.refresh();
}
</script>

<style lang="scss" scoped></style>
